<script setup lang="ts">
import { FullscreenRound, FullscreenExitRound } from '@vicons/material'
import { ref, onMounted, onBeforeUnmount } from 'vue'
import screenfull from 'screenfull'
import { NIcon } from 'naive-ui'

defineProps<{
  element?: Element
}>()

const isFullscreen = ref(false)
const change = () => (isFullscreen.value = screenfull.isFullscreen)

onMounted(() => {
  if (!screenfull.isEnabled) return
  screenfull.on('change', change)
})

onBeforeUnmount(() => {
  if (!screenfull.isEnabled) return
  screenfull.off('change', change)
})
</script>

<template>
  <NIcon
    :size="32"
    @click="screenfull.toggle(element)"
  >
    <FullscreenRound v-if="!isFullscreen" />
    <FullscreenExitRound v-else />
  </NIcon>
</template>
